<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>节流</title>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
</head>

<body>
  <div>
    <h1>我是计数器<span>0</span></h1>
    <button>点击我加上</button>

  </div>
</body>

</html>
<script>
  // 节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发
  let span = document.querySelector('span');
  let button = document.querySelector('button')
  let count = 0;
  // 计数器：在一秒以内，数字只能加上1
  button.onclick = _.throttle(function () {
    // 节流：目前这个回调函数5s内执行一次
    // 加入这个里面有很多的业务代码，是不是可以给浏览器很充裕的时间去解析
    count++;
    span.innerHTML = count
    console.log('执行');
  }, 3000)

  // 防抖：用户操作很频繁，但是只执行一次
  // 节流：用户操作很频繁，但是把频繁的操作变为少量操作【可以给浏览器充裕的时间解析代码】
</script>